<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
    <!-- 导入vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <!-- 导入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入qs -->
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.js"></script>
</head>
<body>
    <div id="app">
        <el-button @click='pulish_article'>发布评论</el-button>

        <el-dialog title="发布评论" :visible.sync="dialogFormVisible">
            <!-- {{form}} -->
            <el-form :model="form">
              <el-form-item label="评论内容" :label-width="formLabelWidth">
                <el-input v-model="form.content" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="用户" :label-width="formLabelWidth">
                <el-select v-model="form.cusId" placeholder="请选择用户id">
                  <el-option v-for='item in customer' :key='item.id' :label="item.realname" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>

        <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="commentTime"
                label="评论时间"
                width="180">
            </el-table-column>
            <el-table-column
                prop="id"
                label="编号"
                width="180">
            </el-table-column>
            <el-table-column
                prop="content"
                label="内容">
            </el-table-column>
        </el-table>
    </div>
    <script>
        new Vue({
            el:'#app',
            created(){
                this.findAllCommoent()
            },
            methods:{
                findAllCommoent(){
                    axios({
                        url:'http://39.96.21.48:5588/comment/findAll',
                        method:'get'
                    }).then((res)=>{
                        this.tableData = res.data.data;
                    })
                },
                save(){
                    // qs会将对象转换为查询字符串
                    // {
                    //     key1:val1,
                    //     key2:val2
                    // }
                    // =>
                    // key1=val1&key2=val2
                    axios({
                        url:'http://39.96.21.48:5588/comment/saveOrUpdate',
                        method:'post',
                        data:Qs.stringify(this.form)
                    }).then((res)=>{
                        // 1. 关闭模态框
                        this.dialogFormVisible = false;
                        // 2. 刷新数据
                        this.findAllCommoent();
                    })
                },
                pulish_article() {
                    // 1. 显示模态框
                    this.dialogFormVisible = true;
                    // 2. 查询所有顾客
                    axios({
                        url:'http://39.96.21.48:5588/customer/findAll',
                        method:'get'
                    }).then((res)=>{
                        this.customer = res.data.data;
                    })
                }
            },
            data(){
                return {
                    dialogFormVisible:false,
                    form:{
                        orderId:1150
                    },
                    formLabelWidth:'120px',
                    customer:[],
                    tableData:[]
                }
            }
        })
    </script>
</body>
</html>